import { useEffect, useState } from "react"
import { useDispatch } from "react-redux"
import { add_list } from '../../store/actions'
import { Input, Button, Upload } from 'antd'
const App: React.FC = () => {
	const dispatch = useDispatch()
	const [title, setTitle] = useState('')
	const [desc, setDesc] = useState('')
	// const [src, setRrc] = useState('')
	const [type, setType] = useState('')

	const handleAdd = () => {
		dispatch(add_list({
			title,
			desc,
			// url: src,
			type,
			key: Math.random().toString().slice(2),
			id: Math.random().toString().slice(2)
		}))

	}

	// function getBase64(img, callback) {
	// 	const reader = new FileReader();
	// 	reader.addEventListener('load', () => callback(reader.result));
	// 	reader.readAsDataURL(img);
	// }

	// const handleChange = (info) => {
	// 	if (info.file.status === 'uploading') {
	// 		// Get this url from response in real world.
	// 		getBase64(info.file.originFileObj, imageUrl =>
	// 			setRrc(imageUrl)
	// 		);
	// 	}
	// }

	return (
		<div>
			<Input placeholder="标题" value={title} onChange={e => setTitle(e.target.value)} />
			<Input placeholder="描述" value={desc} onChange={e => setDesc(e.target.value)} />
			{/* <Upload
				name="avatar"
				listType="picture-card"
				className="avatar-uploader"
				showUploadList={false}
				onChange={handleChange}
			>
				上传
			</Upload> */}

			<Input placeholder="类型" value={type} onChange={e => setType(e.target.value)} />
			<Button type="primary" onClick={() => handleAdd()}>添加</Button>
		</div>
	)


}

export default App